Bootstrap একটি জনপ্রিয় CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টের জন্য বিভিন্ন ধরনের UI কম্পোনেন্ট, লেআউট গ্রিড এবং রেসপন্সিভ ডিজাইন সমর্থন করে। এটি টেমপ্লেট তৈরিতে দ্রুততার সাথে সুন্দর এবং ফাংশনাল ইন্টারফেস তৈরি করতে সাহায্য করে। Apache Tapestry-র সাথে Bootstrap ইন্টিগ্রেট করলে, আপনি দ্রুত এবং কার্যকরী UI তৈরি করতে পারবেন।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে Tapestry-র সাথে Bootstrap ফ্রেমওয়ার্ক ইন্টিগ্রেট করা যায় এবং কীভাবে Bootstrap এর ফিচার ব্যবহার করে একটি সুন্দর এবং রেসপন্সিভ ওয়েব অ্যাপ্লিকেশন তৈরি করা যায়।
Bootstrap এবং Tapestry একে অপরের সাথে কাজ করতে পারে খুব সহজে, কারণ Tapestry শুধুমাত্র HTML টেমপ্লেট রেন্ডারিং এবং কম্পোনেন্ট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, আর Bootstrap এর কাজ HTML, CSS এবং JavaScript দিয়ে স্টাইলিং করা।
আপনি Bootstrap এর CSS এবং JS ফাইল সরাসরি আপনার Tapestry প্রজেক্টে অ্যাড করতে পারেন। এটি করার দুটি উপায় রয়েছে:
resources ফোল্ডারে রাখতে পারেন।HTML টেমপ্লেট (index.tml):
Bootstrap এর CDN ব্যবহার করে CSS এবং JS ফাইল টেমপ্লেটে যুক্ত করুন:
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
<title>Tapestry and Bootstrap Integration</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Tapestry Styles (optional) -->
<link rel="stylesheet" href="${asset:css/styles.css}">
</head>
<body>
<div class="container">
<h1 class="text-center">${messageProvider.get("welcome.message")}</h1>
<p>This is a Tapestry page integrated with Bootstrap.</p>
<button class="btn btn-primary">Bootstrap Button</button>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
${asset} টেমপ্লেট প্রপার্টি ব্যবহার করে custom styles যোগ করা হয়েছে।আপনি Bootstrap ফাইলগুলি ডাউনলোড করে webapp/resources/css এবং webapp/resources/js ডিরেক্টরিতে রাখতে পারেন। তারপর এই ফাইলগুলিকে Tapestry টেমপ্লেটে যুক্ত করতে পারেন।
CSS ফাইল যুক্ত করা (index.tml):
<link rel="stylesheet" href="${asset:css/bootstrap.min.css}">
JS ফাইল যুক্ত করা (index.tml):
<script src="${asset:js/bootstrap.bundle.min.js}"></script>
এখন আপনার প্রজেক্টে Bootstrap টেমপ্লেট কাজ করবে।
Bootstrap এর শক্তিশালী UI কম্পোনেন্ট (যেমন ফর্ম, বাটন, টেবিল ইত্যাদি) Tapestry-র কম্পোনেন্টে সহজেই ব্যবহার করা যায়। Bootstrap ক্লাসগুলিকে Tapestry কম্পোনেন্টে প্রয়োগ করার জন্য শুধু কম্পোনেন্টের HTML টেমপ্লেটে ক্লাস অ্যাট্রিবিউট যোগ করতে হবে।
Tapestry ফর্ম কম্পোনেন্টের জন্য Bootstrap এর স্টাইল ব্যবহার করতে, আপনাকে Bootstrap ক্লাস ফিল্ডে যুক্ত করতে হবে।
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
<title>Form with Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2 class="text-center">Bootstrap Form with Tapestry</h2>
<t:form t:id="loginForm" class="form-group">
<div class="form-group">
<t:label value="Username" for="username" class="control-label"/>
<t:textfield value="username" t:id="username" class="form-control"/>
</div>
<div class="form-group">
<t:label value="Password" for="password" class="control-label"/>
<t:passwordfield value="password" t:id="password" class="form-control"/>
</div>
<t:button value="Login" t:id="loginButton" class="btn btn-primary"/>
</t:form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
form-control এবং বাটনের জন্য btn btn-primary ক্লাস ব্যবহার করা হয়েছে।Tapestry এর মধ্যে Bootstrap Grid System ব্যবহার করে রেসপন্সিভ লেআউট তৈরি করতে, row এবং col ক্লাসগুলি ব্যবহার করতে পারেন।
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
<title>Responsive Grid with Tapestry</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2 class="text-center">Responsive Grid Layout</h2>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Column 1</h5>
<p class="card-text">Content for the first column.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Column 2</h5>
<p class="card-text">Content for the second column.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Column 3</h5>
<p class="card-text">Content for the third column.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
col-md-4 ক্লাস ব্যবহার করে রেসপন্সিভ গ্রিডে ৩টি কলাম তৈরি করা হয়েছে।
Bootstrap এবং Apache Tapestry ইন্টিগ্রেশন আপনাকে দ্রুত এবং কার্যকরী UI তৈরি করতে সহায়ক। আপনি Bootstrap CDN বা লোকালি ফাইল ব্যবহার করে সহজেই CSS এবং JS ফাইল যুক্ত করতে পারেন। Bootstrap এর স্টাইল এবং গ্রিড সিস্টেম ব্যবহার করে Tapestry কম্পোনেন্টে সুন্দর এবং রেসপন্সিভ UI তৈরি করা যায়। Tapestry ফ্রেমওয়ার্ক এবং Bootstrap এর শক্তিশালী কম্বিনেশন ওয়েব ডেভেলপমেন্টের কাজকে অনেক সহজ এবং দ্রুততর করে তোলে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
